<template>
  <div class="rankings-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Trophy /></el-icon>
          <div class="header-text">
            <h2>学习排行</h2>
            <p>学习之星和排行榜</p>
          </div>
        </div>
        <div class="header-actions">
          <el-radio-group v-model="rankingPeriod">
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="all">总榜</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-card>

    <!-- 排行榜类型选择 -->
    <el-card shadow="never" class="tabs-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="学习时长" name="hours" />
        <el-tab-pane label="完成课程" name="courses" />
        <el-tab-pane label="学习积分" name="points" />
        <el-tab-pane label="考试成绩" name="scores" />
      </el-tabs>
    </el-card>

    <el-row :gutter="20">
      <!-- 前三名展示 -->
      <el-col :span="24">
        <div class="top-three">
          <!-- 第二名 -->
          <el-card shadow="hover" class="rank-card rank-2">
            <div class="rank-medal">
              <el-icon :size="60" color="#C0C0C0"><Medal /></el-icon>
              <div class="rank-number">2</div>
            </div>
            <el-avatar :size="80" :src="rankings[1]?.avatar">{{ rankings[1]?.name[0] }}</el-avatar>
            <h3 class="rank-name">{{ rankings[1]?.name }}</h3>
            <p class="rank-dept">{{ rankings[1]?.department }}</p>
            <div class="rank-value">{{ rankings[1]?.value }}</div>
            <div class="rank-label">{{ getValueLabel() }}</div>
          </el-card>

          <!-- 第一名 -->
          <el-card shadow="hover" class="rank-card rank-1">
            <div class="rank-medal">
              <el-icon :size="80" color="#FFD700"><Medal /></el-icon>
              <div class="rank-number rank-champion">1</div>
            </div>
            <el-avatar :size="100" :src="rankings[0]?.avatar">{{ rankings[0]?.name[0] }}</el-avatar>
            <h3 class="rank-name">{{ rankings[0]?.name }}</h3>
            <p class="rank-dept">{{ rankings[0]?.department }}</p>
            <div class="rank-value champion">{{ rankings[0]?.value }}</div>
            <div class="rank-label">{{ getValueLabel() }}</div>
            <el-tag type="warning" effect="dark" class="champion-tag">
              <el-icon><StarFilled /></el-icon>
              冠军
            </el-tag>
          </el-card>

          <!-- 第三名 -->
          <el-card shadow="hover" class="rank-card rank-3">
            <div class="rank-medal">
              <el-icon :size="60" color="#CD7F32"><Medal /></el-icon>
              <div class="rank-number">3</div>
            </div>
            <el-avatar :size="80" :src="rankings[2]?.avatar">{{ rankings[2]?.name[0] }}</el-avatar>
            <h3 class="rank-name">{{ rankings[2]?.name }}</h3>
            <p class="rank-dept">{{ rankings[2]?.department }}</p>
            <div class="rank-value">{{ rankings[2]?.value }}</div>
            <div class="rank-label">{{ getValueLabel() }}</div>
          </el-card>
        </div>
      </el-col>

      <!-- 完整排行榜 -->
      <el-col :span="24">
        <el-card shadow="never" style="margin-top: 20px;">
          <template #header>
            <span>完整排行榜</span>
          </template>
          <el-table :data="rankings" stripe>
            <el-table-column label="排名" width="80">
              <template #default="{ $index }">
                <div class="rank-index" :class="'rank-' + ($index + 1)">
                  <el-icon v-if="$index < 3"><Trophy /></el-icon>
                  <span v-else>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="姓名" width="200">
              <template #default="{ row }">
                <div class="user-info">
                  <el-avatar :size="40" :src="row.avatar">{{ row.name[0] }}</el-avatar>
                  <div class="user-text">
                    <div class="user-name">{{ row.name }}</div>
                    <div class="user-dept">{{ row.department }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" :label="getValueLabel()" width="150">
              <template #default="{ row }">
                <span class="value-text">{{ row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="coursesCompleted" label="完成课程" width="120" />
            <el-table-column prop="totalHours" label="学习时长" width="120" />
            <el-table-column prop="points" label="积分" width="100" />
            <el-table-column label="趋势" width="100">
              <template #default="{ row }">
                <el-tag :type="row.trend > 0 ? 'success' : row.trend < 0 ? 'danger' : 'info'" size="small">
                  <el-icon v-if="row.trend > 0"><Top /></el-icon>
                  <el-icon v-else-if="row.trend < 0"><Bottom /></el-icon>
                  {{ row.trend > 0 ? '+' : '' }}{{ row.trend }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  Trophy, Medal, StarFilled, Top, Bottom
} from '@element-plus/icons-vue'

// 状态
const rankingPeriod = ref('month')
const activeTab = ref('hours')

// 统计数据
const stats = reactive({
  total: 15,
  ongoing: 5,
  completed: 8,
  participants: 245
})

// 排行数据
const rankings = ref([
  {
    rank: 1,
    name: '张三',
    department: '技术部',
    avatar: '',
    value: 156,
    coursesCompleted: 12,
    totalHours: 156,
    points: 2580,
    trend: 2
  },
  {
    rank: 2,
    name: '李四',
    department: '产品部',
    avatar: '',
    value: 142,
    coursesCompleted: 10,
    totalHours: 142,
    points: 2340,
    trend: -1
  },
  {
    rank: 3,
    name: '王五',
    department: '市场部',
    avatar: '',
    value: 128,
    coursesCompleted: 9,
    totalHours: 128,
    points: 2150,
    trend: 3
  },
  {
    rank: 4,
    name: '赵六',
    department: '技术部',
    avatar: '',
    value: 115,
    coursesCompleted: 8,
    totalHours: 115,
    points: 1980,
    trend: 0
  },
  {
    rank: 5,
    name: '孙七',
    department: '财务部',
    avatar: '',
    value: 98,
    coursesCompleted: 7,
    totalHours: 98,
    points: 1750,
    trend: 1
  }
])

// 方法
const handleTabClick = () => {
  console.log('切换排行榜类型', activeTab.value)
}

const getValueLabel = () => {
  const map = {
    hours: '学习时长（小时）',
    courses: '完成课程（门）',
    points: '学习积分',
    scores: '平均分'
  }
  return map[activeTab.value] || '数值'
}
</script>

<style scoped>
.rankings-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.tabs-card {
  margin-bottom: 20px;
}

.top-three {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}

.rank-card {
  text-align: center;
  padding: 30px 20px;
  position: relative;
  transition: all 0.3s;
}

.rank-card:hover {
  transform: translateY(-8px);
}

.rank-1 {
  height: 400px;
  background: linear-gradient(135deg, #f9d423 0%, #ff4e50 30%);
  color: white;
}

.rank-2 {
  height: 350px;
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 30%);
  color: white;
}

.rank-3 {
  height: 350px;
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 30%);
  color: white;
}

.rank-medal {
  position: relative;
  margin-bottom: 20px;
}

.rank-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
}

.rank-champion {
  font-size: 32px;
}

.rank-name {
  margin: 16px 0 4px 0;
  font-size: 20px;
}

.rank-1 .rank-name {
  font-size: 24px;
}

.rank-dept {
  margin: 0 0 16px 0;
  font-size: 14px;
  opacity: 0.9;
}

.rank-value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 8px;
}

.rank-value.champion {
  font-size: 48px;
}

.rank-label {
  font-size: 13px;
  opacity: 0.9;
}

.champion-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

.rank-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.rank-1 .rank-index {
  color: #FFD700;
}

.rank-2 .rank-index {
  color: #C0C0C0;
}

.rank-3 .rank-index {
  color: #CD7F32;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.user-name {
  font-weight: 500;
  color: #303133;
}

.user-dept {
  font-size: 12px;
  color: #909399;
}

.value-text {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
}
</style>

